<template>
  <div class="app-container">
    <h4>进度</h4>
    <el-steps :space="200" :active="active" finish-status="success">
      <el-step title="登记"></el-step>
      <el-step title="已派单"></el-step>
      <el-step title="未处理"></el-step>
      <el-step title="处理中"></el-step>
      <el-step title="已处理"></el-step>
      <el-step title="已完成"></el-step>
    </el-steps>
    <h4>故障详情</h4>
    <table
      class="table table-striped table-condenseda table-bordered"
      width="100%"
    >
      <tbody>
        <tr>
          <th width="15%">故障类型</th>
          <td width="35%">
            <b v-if="cpHitch.hitchType == 0">通讯故障</b>
            <b v-if="cpHitch.hitchType == 1">网关故障</b>
            <b v-if="cpHitch.hitchType == 2">配件故障</b>
            <b v-if="cpHitch.hitchType == 3">主板故障</b>
            <b v-if="cpHitch.hitchType == 4">过流</b>
            <b v-if="cpHitch.hitchType == 5">过压</b>
            <b v-if="cpHitch.hitchType == 6">电器短路</b>
            <b v-if="cpHitch.hitchType == 7">线路老化</b>
          </td>
          <th width="15%">充电站点</th>
          <td width="35%">{{ cpHitch.addressSite }}</td>
        </tr>
        <tr>
          <th>充电桩型号</th>
          <td>{{ cpHitch.chargingpileType }}</td>
          <th>充电枪编号</th>
          <td>
            {{ cpHitch.number }}
          </td>
        </tr>
        <tr>
          <th>发生时间</th>
          <td>{{ cpHitch.regTime }}</td>
          <th>详细地点</th>
          <td>
            <b>{{ cpHitch.address }}</b>
          </td>
        </tr>
        <tr>
          <th>紧急程度</th>
          <td>
            <b v-if="cpHitch.rank == 0">一般</b>
            <b v-if="cpHitch.rank == 1">紧急</b>
            <b v-if="cpHitch.rank == 2">加急</b>
            <b v-if="cpHitch.rank == 3">超加急</b>
          </td>
          <th>状态</th>
          <td>
            <b v-if="cpHitch.status == 0">登记</b>
            <b v-if="cpHitch.status == 1">已派单</b>
            <b v-if="cpHitch.status == 2">未处理</b>
            <b v-if="cpHitch.status == 3">处理中</b>
            <b v-if="cpHitch.status == 4">已处理</b>
            <b v-if="cpHitch.status == 5">已完成</b>
          </td>
        </tr>
        <tr>
          <th>故障内容</th>
          <td colspan="3">{{ cpHitch.content }}</td>
        </tr>
        <tr>
          <th>资料附件</th>
          <td colspan="3">
            <b>
              <el-image
                style="width: 150px"
                :src="cpHitch.hiddenImg"
                :preview-src-list="[cpHitch.hiddenImg]"
              />
            </b>
          </td>
        </tr>
        <!-- <tr>
          <th>处理人</th>
          <td>
            <b>{{ cpHitch.person }}</b>
          </td>
          <th>预计完成时间</th>
          <td>
            <b>{{ cpHitch.estimate }}</b>
          </td>
        </tr>
        <tr>
          <th>任务内容</th>
          <td colspan="3">
            <b>{{ cpHitch.assContent }}</b>
          </td>
        </tr> -->
      </tbody>
    </table>
    <div v-if="this.$route.params.status > 0">
      <h4>派发信息</h4>
      <table
        class="table table-striped table-condenseda table-bordered"
        width="100%"
      >
        <tbody>
          <tr>
            <th width="15%">处理人</th>
            <td width="35%">
              <b>{{ cpHitchFlat.person }}</b>
            </td>
            <th width="15%">发生时间</th>
            <td width="35%">
              {{ cpHitchFlat.estimate }}
            </td>
          </tr>

          <tr>
            <th>任务内容</th>
            <td colspan="3">
              <b>{{ cpHitchFlat.assContent }}</b>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-if="this.$route.params.status > 2">
      <h4>处理情况</h4>
      <table
        class="table table-striped table-condenseda table-bordered"
        width="100%"
      >
        <tbody>
          <tr>
            <th>办理说明</th>
            <td>
              <b>{{ cpHitchDeal.explain }}</b>
            </td>
          </tr>
          <tr>
            <th>现场图片</th>
            <td>
              <el-image
                style="width: 150px"
                :src="cpHitchDeal.sceneImg"
                :preview-src-list="[cpHitchDeal.sceneImg]"
              />
            </td>
          </tr>
          <tr>
            <th>其他附件</th>
            <td>
              <el-image
                style="width: 150px"
                :src="cpHitchDeal.otherImg"
                :perview-src-list="[cpHitchDeal.otherImg]"
              />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-row style="text-align: center; margin-top: 40px">
      <el-button @click="back">返回</el-button>
    </el-row>
  </div>
</template>
<script>
import '@/styles/show.css'
import listApi from '@/api/charging-pile/hitch_manage'

export default {
  data() {
    return {
      // hitchInfo: {},
      // dealInfo: {},
      // lendItemList: [], //投资列表
      // lendReturnList: [], //还款计划列表
      // dealRank: 0,

      cpHitch: {
        person: {},
      }, //故障表
      cpHitchFlat: {
        person: null,
      }, //故障派发
      cpHitchDeal: {
        explain: null,
      }, //故障办理
      active: 0,
    }
  },

  created() {
    console.log(this.$route.params.id)
    console.log(this.$route.params.status)
    //console.log(this.$route.params.rank)
    //故障
    if (this.$route.params.id) {
      this.fetchDataById()
      this.active = 1
      console.log('=====================' + this.active)
    }
    //故障派发
    if (this.$route.params.status > 0) {
      // this.dealRank = 4
      this.fetchDataDealById()
      this.active = 2
    }
    //故障办理
    if (this.$route.params.status > 1) {
      this.findCpHitchDealDetail()
      this.active = 3
    }
    if (this.$route.params.status > 2) {
      this.findCpHitchDealDetail()
      this.active = 4
    }
    if (this.$route.params.status > 3) {
      this.findCpHitchDealDetail()
      this.active = 5
    }
    if (this.$route.params.status > 4) {
      this.findCpHitchDealDetail()
      this.active = 6
    }
  },

  methods: {
    //故障
    fetchDataById() {
      listApi.findCpHitchManagerById(this.$route.params.id).then((res) => {
        console.log(res)
        this.cpHitch = res.data.cpHitch
      })
    },
    //故障派发
    fetchDataDealById() {
      listApi.findHitchManagerFlatDetail(this.$route.params.id).then((res) => {
        console.log(res)
        console.log(res.data.cpHitchFlat)
        this.cpHitchFlat = res.data.cpHitchFlat
      })
    },
    //故障办理
    findCpHitchDealDetail() {
      listApi.findCpHitchDealDetail(this.$route.params.id).then((res) => {
        console.log(res)
        this.cpHitchDeal = res.data.cpHitchDeal
      })
    },
    back() {
      this.$router.push({ path: '/charging-pile/hitch_manager' })
    },
  },
}
</script>
